『Every Layout』

https://gyazo.com/f75f8e88badd7748262af6240cf0a35d

2021/11/23出版

著者

監訳

手に取った動機

CSSはつまみ食いでやってきたので、そろそろ体系的な本を読んどかないとな、と思った

1章 基礎

1-01 ボックス

1-02 コンポジション

「継承よりコンポジション」はOOPだけでなくCSSでも使える

Reactのこの文脈での「継承」が何を指しているのかわからん

1-03 単位

単位としてpxを指定するのはやめたほうがいい

1-04 グローバルスタイルとローカルスタイル

utlitity class

code:css

.font-size\:base {

font-size: 1rem;

}

スコープ化されたstyleの方法

id

inline style

shadow DOM

2-01とかを読んでみないとよくわからない感じがする

1-05 モジュラースケール

1-06 公理

2章のここがイミフだったので理解したい

2章 レイアウト

2-01 Stack

垂直方向のmarginを扱う

2-02 Box

基本要素

要素同士を区切るためのborderは親が指定する

stackにおけるmarginと同様

そうじゃないと隣接する要素の場合、borderが二重になってしまう

2-03 Center

要素の幅を特定のサイズを超えないように制限した上で中央に寄せる

もっと小さくしたい時はどうすればいい

左右中央寄せ

2-04 Cluster

2-05 Sidebar

2-06 Switcher

画面幅に応じて、リストが横並びから縦並びになるやつ

というかほぼ読んでない

2-07 Cover

Coverの中身が、上下中央揃えになる

header/footerの存在は許容する

上下中央揃え

2-08 Grid

予めページ前提をgridに分割して指定した場所に配置して使うやつは非推奨

どうしてもmediaqueryが必要になってしまうため。

2-09 Frame

アスペクト比を制御する

2-10 Reel

2-11 Imposter

modalやdialogなど、画面の上に重ねる形で要素を中央配置するもの

2-12 Icon